<template>
  <div class="login" >
   <vue-particles
    color="#409EFF"
    :particleOpacity="0.7"
    :particlesNumber="100"
    shapeType="circle"
    :particleSize="4"
    linesColor="#409EFF"
    :linesWidth="1"
    :lineLinked="true"
    :lineOpacity="0.4"
    :linesDistance="150"
    :moveSpeed="3"
    :hoverEffect="true"
    hoverMode="grab"
    :clickEffect="true"
    clickMode="push"
    ></vue-particles>
    <div class='fullscreen-button' @click="toggleFullscreen">fullscreen</div>
    <div class="login__content">
      <img src="~images/logo2.png" alt="" class="login__content-img">
      <div class="btn wrapper">数据中心</div>
      <div class="login__content-form">
        <div class="form-item">
          <img src="~images/icon_account@2x.png" alt="">
          <input type="text" placeholder="请输入用户名" v-model="username">
        </div>
        <div class="form-item">
          <img src="~images/icon_password@2x.png" alt="">
          <input type="password" placeholder="请输入密码" v-model="password">
        </div>
        <div class="form-item yzm">
          <input type="text" placeholder="请输入验证码" v-model="verifyCode">
          <img :src="codeGif" alt="" @click="getNewCode">
        </div>
      </div>
      <div class="btn pointer" @click="login">登  录</div>
    </div>
    <div class="hideBtn" @click="dialogFormVisible = true"></div>
    <el-dialog title="" :visible.sync="dialogFormVisible" width="300px">
      <el-form>
        <el-form-item label="版本选择" label-width="100px">
          <el-select v-model="isJia" placeholder="请选择">
            <el-option label="A版本" value="true"></el-option>
            <el-option label="B版本" value="false"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { Message,Button, Option, Select, Form, FormItem, Dialog } from 'element-ui'
import {
captchaNum,
login
} from 'src/api/api'
import { mapActions } from 'vuex'
import storage from 'good-storage'
export default {
  components: {
    [Select.name]: Select,
    [Option.name]: Option,
    [Button.name]: Button,
    [Form.name]: Form,
    [FormItem.name]: FormItem,
    [Dialog.name]: Dialog,
  },
  data() {
    return {
      codeGif: '',
      username: '',
      password: '',
      verifyCode: '',
      code: '',
      isFullScreen: false,
      isJia: 'true',
      dialogFormVisible: false
     }
  },
  created() {
    this.setIsJia(this.isJia)
    this.getNewCode()
  },
  methods: {
    ...mapActions(['setToken', 'setIsJia']),
    getNewCode() {
      captchaNum().then(res => {
        this.code = res
        this.codeGif = process.env.BASE_API + '/oa/user/captcha?code=' + res + '&v=' + (new Date())
      })
    },
    confirm() {
      this.dialogFormVisible = false
      this.setIsJia(this.isJia)
    },
    login() {
      const params = {
        username: this.username,
        password: this.password,
        verifyCode: this.verifyCode,
        code: this.code,
        // isJia: this.isJia
      }
      if(this.username && this.verifyCode && this.password) {
        login(params).then(res=> {
          if(res.success === true) {
            this.setToken(res.data.token)
            this.$router.push({
              path: '/home'
            })
          }
        })
      } else {
        // alert('请填写登录信息')
        Message({
          message: '请填写登录信息',
          type: 'error',
          duration: 3000
        })
      }
    },
    toggleFullscreen() {
      if (this.isFullScreen) {
        this.exitFullScreen()
      } else {
        this.launchFullScreen(document.documentElement)
      }
      this.isFullScreen = !this.isFullScreen
    },
    launchFullScreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen()
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen()
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen()
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen()
      }
    },
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen()
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen()
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen()
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen()
      }
    }
  }
}
</script>
<style lang="scss">
.login {
  height: 100vh;
  background: #0b153a;
  #particles-js{
    width: 100%;
    height: calc(100% - 100px);
    position: absolute;
  }
  &__content {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 400px;
    text-align: center;
    &-img {
      width: 322px;
      height: 68px;
      // margin-bottom: 20px;
    }
    &-form {
      background: #fff;
    }
    .btn {
      width: 400px;
      height: 45px;
      line-height: 45px;
      background:rgba(59,105,252,1);
      border-radius: 7px;
      font-size: 20px;
      color: #fff;
      text-align: center;
      margin-top: 30px;
    }
    .wrapper {
      border-radius:7px 7px 0 0;
      margin-bottom: 20px;
    }
    .form-item {
      border-bottom: 1px solid #ECECEC;
      height: 50px;
      line-height: 50px;
      display: flex;
      align-items: center;
      img {
        height: 25px;
        width: 25px;
        padding: 0 20px;
      }
      input {
        height: 40px;
        width: 200px;
        font-size: 16px;
        padding: 0 5px;
      }
      input::placeholder {
        color: #999999;
      }
    }
    .yzm {
      padding-left: 20px;
      input {
        background: #F3F3F3;
        width: 200px;
      }
      input::placeholder {
        text-align: center;
      }
      img {
        margin-left: 10px;
        padding: 0;
        height: 40px;
        width: 110px;
      }
    }
  }
  .fullscreen-button {
    position: absolute;
    top: 20px;
    width: 200px;
    height: 40px;
    font-size: 25px;
    color: white;
    right: 30px;
    border-radius: 8px;
    color: #E9D70C;
  }
  .hideBtn {
    height: 300px;
    width: 300px;
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
</style>
